<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3A30-documentation%3A30-component_reference%3Asamples.js"></script>
<div class="shadow">

  <div class="contents">

    <h2>MultiButtonComponent</h2>

    <h3>Description</h3>
    <p>
    Renders a set of  buttons to choose option(s) from. It will read values from an xaction result set or from an array of values 
    unless the parameter <code>valuesArray</code> is specified.
    </p>

    <h3>Options</h3>

    <dl class="documentation">
      <dt>name</dt>
      <dd>The name of the component</dd>

      <dt>type</dt>
      <dd><code>MultiButtonComponent</code></dd>

      <dt>listeners</dt>
      <dd><i>Array - </i> Parameters who this component will react to</dd>

      <dt>parameters</dt>
      <dd><i>Array of Arrays - </i> Parameters to pass to the xaction</dd>

      <dt>parameter</dt>
      <dd>Variable where the selection is stored</dd>

      <dt>valueAsId</dt>
      <dd><i>Boolean - </i> False indicates the selector will have id/value. True indicates it will use value/value.</dd>

      <dt>queryDefinition</dt>
      <dd>MetaLayer object with the query definition (see MetaLayer options)</dd>
      
      <dt>valuesArray</dt>
      <dd><i>Array of Arrays - </i> Use this to pass a default value to the selector</dd>

      <dt>solution</dt>
      <dd>Solution where the xaction solution is</dd>

      <dt>path</dt>
      <dd>Path where the xaction file is</dd>

      <dt>action</dt>
      <dd>Xaction file name</dd>

      <dt>separator</dt>
      <dd>How to separate the options</dd>

      <dt>htmlObject</dt>
      <dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

      <dt>refreshPeriod</dt>
      <dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

      <dt>isMultiple</dt>
      <dd><i>Boolean - </i>If true the component will allow the selection of more than one value. </dd>

      <dt>executeAtStart</dt>
      <dd>True to execute the component at start, false otherwise</dd>

      <dt>tooltip</dt>
      <dd>Tooltip to be displayed when mouse hovers</dd>

      <dt>preExecution</dt>
      <dd><i>Function - </i> Function to be called before the component is executed</dd>

      <dt>postExecution</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>preChange</dt>
      <dd><i>Function - </i> Function to be called before the component is changed</dd>

      <dt>postChange</dt>
      <dd><i>Function - </i> Function to be called after the component is changed</dd>


  </dl>

    <h3>MetaLayer options</h3>

    <dl class="documentation">
      <dt>queryType</dt>
      <dd>Type of query to read results from. Can be sql or mdx. Default: mdx</dd>

      <dt>jndi</dt> 
      <dd>Connection to use for the query</dd>

      <dt>query</dt> 
      <dd>sql or mdx Query to execute</dd>

      <dt>cube</dt> 
      <dd>Cube name to use when queryType is mdx</dd>

      <dt>catalog</dt> 
      <dd>Mondrian schema to use when queryType is mdx</dd>
    </dl>

    <h3>Sample</h3>

    <div id="example" class="flora">
      <ul>
        <li><a href="#sample"><span>Sample</span></a></li>
        <li><a href="#code"><span>Code</span></a></li>
      </ul>
      <div id="sample">
        <div id="sampleObject"></div>
        <br/>
      </div>

      <div id="code">
        <textarea cols="80" rows="40" id="samplecode">
require([
  'cdf/Dashboard.Blueprint',
  'cdf/components/MultiButtonComponent'
], function(Dashboard, MultiButtonComponent) {

  var dashboard = new Dashboard();
  dashboard.addParameter("region", "");

  dashboard.addComponent(new MultiButtonComponent({
    name: "multiButtonComponent",
    type: "MultiButtonComponent",
    parameters: [],
    path: "/public/plugin-samples/pentaho-cdf/20-samples/sample_dashboard_broadcast/regions.xaction",
    parameter: "region",
    separator: ",&nbsp;",
    valueAsId: true,
    isMultiple: false,
    htmlObject: "sampleObject",
    executeAtStart: true,
    postChange: function() {
      alert("you chose: " + this.dashboard.getParameterValue(this.parameter));
    }
  }));
  dashboard.init();
});
        </textarea>
        <br/>
        <button id="tryMe">Try me</button>
      </div>
    </div>
  </div>
</div>
